import * as React from 'react'
import Styles from './index.module.scss'
import OccupationListItem from './Item'

import { connect } from 'react-redux'
import { changeOccupation } from '@/store/occupation/action'
import ParticleSystem from '@/THREE'
import isMobile from '@/utils/isMobile'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass'

type OccupationListProps = React.PropsWithChildren<{
  changeOccupation: Function
  className: string
  ParticleContext: ParticleSystem
}>

const degree = {
  a: 0,
  b: 72,
  c: 144,
  d: 216,
  e: 288
}
let inch: number
if (isMobile()) {
  inch = 4
} else {
  inch = 8
}

const cv = (
  <svg
    // @ts-expect-error
    t="1699594330787"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="9930"
    width="200"
    height="200"
  >
    <path
      d="M798.72 122.88a102.4 102.4 0 0 1 102.2976 97.95584L901.12 225.28v409.6a102.4 102.4 0 0 1-97.95584 102.2976L798.72 737.28H532.48v102.4h163.84a20.48 20.48 0 0 1 0 40.96H327.68a20.48 20.48 0 0 1 0-40.96h163.84v-102.4H225.28a102.4 102.4 0 0 1-102.2976-97.95584L122.88 634.88V225.28a102.4 102.4 0 0 1 97.95584-102.2976L225.28 122.88h573.44z m0 40.96H225.28a61.44 61.44 0 0 0-61.3376 57.83552L163.84 225.28v409.6a61.44 61.44 0 0 0 57.83552 61.3376L225.28 696.32h573.44a61.44 61.44 0 0 0 61.3376-57.83552L860.16 634.88V225.28a61.44 61.44 0 0 0-57.83552-61.3376L798.72 163.84z m-286.72 122.88c67.56352 0 128.6144 35.9424 182.55872 105.84064a61.46048 61.46048 0 0 1 2.31424 71.80288l-2.4576 3.39968-5.16096 6.57408C636.66176 539.81184 577.3312 573.44 512 573.44c-67.56352 0-128.6144-35.9424-182.55872-105.84064a61.46048 61.46048 0 0 1-2.31424-71.80288l2.4576-3.39968 5.16096-6.57408C387.33824 320.34816 446.6688 286.72 512 286.72z m0 40.96c-49.90976 0-96.50176 25.3952-140.32896 77.7216l-4.87424 5.91872-4.9152 6.2464a20.48 20.48 0 0 0 0 25.02656C408.61696 503.17312 458.42432 532.48 512 532.48c49.90976 0 96.50176-25.3952 140.32896-77.7216l4.87424-5.91872 4.9152-6.2464a20.48 20.48 0 0 0 0-25.02656C615.38304 356.98688 565.57568 327.68 512 327.68z m0 20.48a81.92 81.92 0 1 1 0 163.84 81.92 81.92 0 0 1 0-163.84z m0 40.96a40.96 40.96 0 1 0 0 81.92 40.96 40.96 0 0 0 0-81.92z"
      fill="#000000"
      p-id="9931"
    ></path>
  </svg>
)
const bd = (
  <svg
    // @ts-expect-error
    t="1699594191983"
    viewBox="-100 -100 1224 1224"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="5227"
    width="200"
    height="200"
  >
    <path
      d="M791.272727 186.181818a46.545455 46.545455 0 1 0 93.090909 0 46.545455 46.545455 0 0 0-93.090909 0zM791.272727 837.818182a46.545455 46.545455 0 1 0 93.090909 0 46.545455 46.545455 0 0 0-93.090909 0zM791.272727 512a46.545455 46.545455 0 1 0 93.090909 0 46.545455 46.545455 0 0 0-93.090909 0z"
      fill="#515152"
      p-id="5228"
    ></path>
    <path
      d="M69.818182 123.531636v125.300364h884.363636V123.531636h-884.363636zM46.545455 46.545455h930.90909c25.693091 0 46.545455 22.993455 46.545455 51.339636v176.593454C1024 302.917818 1003.147636 325.818182 977.454545 325.818182H46.545455c-25.693091 0-46.545455-22.993455-46.545455-51.339637V97.885091C0 69.538909 20.852364 46.545455 46.545455 46.545455zM69.818182 775.168v125.300364h884.363636v-125.300364h-884.363636zM46.545455 698.181818h930.90909c25.693091 0 46.545455 22.993455 46.545455 51.339637v176.593454c0 28.392727-20.852364 51.339636-46.545455 51.339636H46.545455c-25.693091 0-46.545455-22.993455-46.545455-51.29309v-176.686546C0 721.175273 20.852364 698.181818 46.545455 698.181818zM69.818182 449.349818v125.300364h884.363636V449.349818h-884.363636zM46.545455 372.363636h930.90909c25.693091 0 46.545455 22.993455 46.545455 51.293091v176.686546c0 28.299636-20.852364 51.293091-46.545455 51.293091H46.545455c-25.693091 0-46.545455-22.993455-46.545455-51.293091V423.656727C0 395.357091 20.852364 372.363636 46.545455 372.363636z"
      fill="#515152"
      p-id="5229"
    ></path>
  </svg>
)
const An = (
  <svg
    // @ts-expect-error
    t="1699594364348"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="11191"
    width="200"
    height="200"
  >
    <path
      d="M867.738 350.003H673.997v-193.74c0-35.636-28.877-64.615-64.615-64.615H157.286c-35.635 0-64.614 28.877-64.614 64.614v645.94c0 35.635 28.877 64.614 64.614 64.614h387.482c0 35.635 28.877 64.614 64.614 64.614h258.356c35.635 0 64.614-28.876 64.614-64.614V414.618c0-35.738-28.877-64.615-64.614-64.615zM367.206 834.458c-8.908 0-16.179-7.27-16.179-16.18 0-8.908 7.27-16.179 16.18-16.179 8.908 0 16.179 7.27 16.179 16.18-0.103 8.908-7.27 16.179-16.18 16.179z m209.92-419.84v355.225h-419.84c-17.817 0-32.256-14.438-32.256-32.256V156.262c0-17.817 14.439-32.256 32.256-32.256h452.096c17.818 0 32.256 14.439 32.256 32.256v193.741c-35.635 0-64.512 28.877-64.512 64.615z m322.97 451.89c0 17.818-14.438 32.666-32.256 32.666l-226.1-0.102c-17.817 0-32.255-17.818-32.255-35.635v-448.82c0-17.817 14.438-32.255 32.256-32.255H867.84c17.818 0 32.256 14.438 32.256 32.256v451.89z m0 0"
      p-id="11192"
    ></path>
  </svg>
)
const fd = (
  <svg
    // @ts-expect-error
    t="1699594039081"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="1582"
    width="200"
    height="200"
  >
    <path
      d="M824.889 630.993l-122.027-50.347a28.444 28.444 0 1 0-21.143 53.57l60.112 24.368-60.112 27.59a28.444 28.444 0 0 0-14.602 37.358 28.919 28.919 0 0 0 25.98 16.024 15.455 15.455 0 0 0 11.377-3.224l120.415-54.993a28.919 28.919 0 0 0 16.213-25.979 25.695 25.695 0 0 0-16.213-24.367zM548.599 517.31a28.444 28.444 0 0 0-35.746 17.825l-61.63 188.397a28.444 28.444 0 0 0 17.826 35.745 17.54 17.54 0 0 0 8.154 1.612 31.668 31.668 0 0 0 27.591-19.532l61.725-188.302a28.444 28.444 0 0 0-17.92-35.745z m-189.915 80.023a30.151 30.151 0 0 0-37.357-16.213l-122.216 49.873a30.436 30.436 0 0 0-17.825 25.979 28.444 28.444 0 0 0 16.687 25.695l120.13 55.182a30.056 30.056 0 0 0 11.378 3.224 28.919 28.919 0 0 0 25.98-16.214 28.444 28.444 0 0 0-14.602-37.357l-60.112-27.59 60.112-24.368c16.214-7.775 24.368-24.083 17.825-38.21z"
      p-id="1583"
    ></path>
    <path
      d="M853.333 170.667a56.889 56.889 0 0 1 56.89 56.889v568.888a56.889 56.889 0 0 1-56.89 56.89H170.667a56.889 56.889 0 0 1-56.89-56.89V227.556a56.889 56.889 0 0 1 56.89-56.89h682.666m0-56.888H170.667A113.778 113.778 0 0 0 56.889 227.556v568.888a113.778 113.778 0 0 0 113.778 113.778h682.666a113.778 113.778 0 0 0 113.778-113.778V227.556a113.778 113.778 0 0 0-113.778-113.778z"
      p-id="1584"
    ></path>
    <path
      d="M967.111 365.321H56.89v56.89H967.11v-56.89zM182.329 273.54a42.667 42.667 0 1 0 85.333 0 42.667 42.667 0 1 0-85.333 0zM314.785 273.54a42.667 42.667 0 1 0 85.334 0 42.667 42.667 0 1 0-85.334 0zM447.241 273.54a42.667 42.667 0 1 0 85.334 0 42.667 42.667 0 1 0-85.334 0z"
      p-id="1585"
    ></path>
  </svg>
)
const ui = (
  <svg
    // @ts-expect-error
    t="1699594251437"
    viewBox="0 60 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="8898"
    width="200"
    height="200"
  >
    <path
      d="M967.082667 284.416L739.584 56.917333 512 284.416 284.416 56.917333 56.917333 284.416 284.416 512 56.917333 739.584v227.498667h227.498667L512 739.584l227.584 227.498667 227.498667-227.498667L739.584 512l227.498667-227.584zM290.133333 438.016L386.816 341.333333l-39.765333-39.850666-96.768 96.768-34.133334-34.133334 102.4-102.4L273.066667 221.866667 176.384 324.266667 136.533333 284.416 284.416 136.533333l187.733333 187.733334L324.266667 472.149333l-34.133334-34.133333z m-176.384 472.234667V796.416l113.834667 113.834667H113.749333z m170.666667-22.784L136.533333 739.584 739.584 136.533333 887.466667 284.416 284.416 887.466667zM887.466667 739.584L739.584 887.466667 699.733333 847.616l102.4-102.4-39.850666-39.765333-102.4 102.4-34.133334-34.133334 102.4-102.4L682.666667 631.466667 580.266667 733.866667l-34.133334-34.133334 147.882667-147.882666 193.450667 187.733333z"
      fill="#4A4A4A"
      p-id="8899"
    ></path>
  </svg>
)

const locatVal: number = 0
let startX: number = 0
let flag1: boolean = true
const flag2: boolean = true
let flag3: boolean = true

const OccupationList = (props: OccupationListProps) => {
  const [locat, setlocat] = React.useState(0)
  const [sta, setsta] = React.useState('none')
  function changeOccupation(target: string) {
    props.ParticleContext.ChangeModel('qr')
    // ParticleSystem.composer.removePass(new BloomPass(0.75));
    props.changeOccupation(target)
  }
  const rotate = (e: MouseEvent) => {
    if (flag3) {
      flag3 = false
      startX = e.clientX
      document.removeEventListener('mousemove', move)
      document.addEventListener('mousemove', move)
    }
  }

  const move = React.useCallback((e: MouseEvent) => {
    if (flag3) return
    const x = e.clientX - startX
    setlocat(x / 10)
    console.log(locat)
  }, [])

  React.useEffect(() => {
    document.addEventListener('mouseup', () => {
      adde()
      adjust()
    })
  }, [])

  const adde = () => {
    if (flag1) {
      flag3 = true
      flag1 = false
      document.removeEventListener('mousemove', move)
      setTimeout(() => {
        flag1 = true
      }, 200)
    }
  }

  const adjust = React.useCallback(() => {
    if (sta === 'none') {
      setsta('transform 0.8s')
      setlocat(
        locat > 0 ? Math.floor(locat / 36) * 72 : Math.ceil(locat / 36) * 72
      )
      setTimeout(() => {
        setsta('none')
      }, 800)
    }
  }, [locat])

  return (
    <div
      onMouseDown={(e: any) => rotate(e)}
      className={`${Styles.occupation_list} ${props.className}`}
    >
      <div
        style={{
          transform: `rotateY(${locat}deg)`,
          transition: `${sta}`
        }}
        className={`${Styles.select}`}
      >
        <OccupationListItem
          style={{
            transform: `rotateY(${degree.a}deg) translateZ(${inch}rem)`
          }}
          onClick={flag2 ? () => changeOccupation('视觉') : () => { }}
          child={cv}
        >
          {['视觉', 'computer vision']}
        </OccupationListItem>
        <OccupationListItem
          style={{
            transform: `rotateY(${degree.b}deg) translateZ(${inch}rem)`
          }}
          onClick={flag2 ? () => changeOccupation('后端') : () => { }}
          child={bd}
        >
          {['后端', 'back-end']}
        </OccupationListItem>
        <OccupationListItem
          style={{
            transform: `rotateY(${degree.c}deg) translateZ(${inch}rem)`
          }}
          onClick={
            flag2
              ? () => {
                  changeOccupation('安卓')
                }
              : () => { }
          }
          child={An}
        >
          {['安卓', 'android']}
        </OccupationListItem>
        <OccupationListItem
          style={{
            transform: `rotateY(${degree.d}deg) translateZ(${inch}rem)`
          }}
          onClick={flag2 ? () => changeOccupation('前端') : () => { }}
          child={fd}
        >
          {['前端', 'front-end']}
        </OccupationListItem>
        <OccupationListItem
          style={{
            transform: `rotateY(${degree.e}deg) translateZ(${inch}rem)`
          }}
          onClick={flag2 ? () => changeOccupation('UI') : () => { }}
          child={ui}
        >
          {['UI', 'interface-design']}
        </OccupationListItem>
      </div>
    </div>
  )
}

export default connect(
  ({ OccupationStore, ParticleContextStore }) => ({
    occupation: OccupationStore.occupation,
    ParticleContext: ParticleContextStore.ParticleContext
  }),
  {
    changeOccupation
  }
)(OccupationList)

// const ele = {[
// `<svg t="1699594330787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9930" width="200" height="200"><path d="M798.72 122.88a102.4 102.4 0 0 1 102.2976 97.95584L901.12 225.28v409.6a102.4 102.4 0 0 1-97.95584 102.2976L798.72 737.28H532.48v102.4h163.84a20.48 20.48 0 0 1 0 40.96H327.68a20.48 20.48 0 0 1 0-40.96h163.84v-102.4H225.28a102.4 102.4 0 0 1-102.2976-97.95584L122.88 634.88V225.28a102.4 102.4 0 0 1 97.95584-102.2976L225.28 122.88h573.44z m0 40.96H225.28a61.44 61.44 0 0 0-61.3376 57.83552L163.84 225.28v409.6a61.44 61.44 0 0 0 57.83552 61.3376L225.28 696.32h573.44a61.44 61.44 0 0 0 61.3376-57.83552L860.16 634.88V225.28a61.44 61.44 0 0 0-57.83552-61.3376L798.72 163.84z m-286.72 122.88c67.56352 0 128.6144 35.9424 182.55872 105.84064a61.46048 61.46048 0 0 1 2.31424 71.80288l-2.4576 3.39968-5.16096 6.57408C636.66176 539.81184 577.3312 573.44 512 573.44c-67.56352 0-128.6144-35.9424-182.55872-105.84064a61.46048 61.46048 0 0 1-2.31424-71.80288l2.4576-3.39968 5.16096-6.57408C387.33824 320.34816 446.6688 286.72 512 286.72z m0 40.96c-49.90976 0-96.50176 25.3952-140.32896 77.7216l-4.87424 5.91872-4.9152 6.2464a20.48 20.48 0 0 0 0 25.02656C408.61696 503.17312 458.42432 532.48 512 532.48c49.90976 0 96.50176-25.3952 140.32896-77.7216l4.87424-5.91872 4.9152-6.2464a20.48 20.48 0 0 0 0-25.02656C615.38304 356.98688 565.57568 327.68 512 327.68z m0 20.48a81.92 81.92 0 1 1 0 163.84 81.92 81.92 0 0 1 0-163.84z m0 40.96a40.96 40.96 0 1 0 0 81.92 40.96 40.96 0 0 0 0-81.92z" fill="#000000" p-id="9931"></path></svg>`,
// `<svg t="1699594191983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5227" width="200" height="200"><path d="M791.272727 186.181818a46.545455 46.545455 0 1 0 93.090909 0 46.545455 46.545455 0 0 0-93.090909 0zM791.272727 837.818182a46.545455 46.545455 0 1 0 93.090909 0 46.545455 46.545455 0 0 0-93.090909 0zM791.272727 512a46.545455 46.545455 0 1 0 93.090909 0 46.545455 46.545455 0 0 0-93.090909 0z" fill="#515152" p-id="5228"></path><path d="M69.818182 123.531636v125.300364h884.363636V123.531636h-884.363636zM46.545455 46.545455h930.90909c25.693091 0 46.545455 22.993455 46.545455 51.339636v176.593454C1024 302.917818 1003.147636 325.818182 977.454545 325.818182H46.545455c-25.693091 0-46.545455-22.993455-46.545455-51.339637V97.885091C0 69.538909 20.852364 46.545455 46.545455 46.545455zM69.818182 775.168v125.300364h884.363636v-125.300364h-884.363636zM46.545455 698.181818h930.90909c25.693091 0 46.545455 22.993455 46.545455 51.339637v176.593454c0 28.392727-20.852364 51.339636-46.545455 51.339636H46.545455c-25.693091 0-46.545455-22.993455-46.545455-51.29309v-176.686546C0 721.175273 20.852364 698.181818 46.545455 698.181818zM69.818182 449.349818v125.300364h884.363636V449.349818h-884.363636zM46.545455 372.363636h930.90909c25.693091 0 46.545455 22.993455 46.545455 51.293091v176.686546c0 28.299636-20.852364 51.293091-46.545455 51.293091H46.545455c-25.693091 0-46.545455-22.993455-46.545455-51.293091V423.656727C0 395.357091 20.852364 372.363636 46.545455 372.363636z" fill="#515152" p-id="5229"></path></svg>`,
// `<svg t="1699594364348" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11191" width="200" height="200"><path d="M867.738 350.003H673.997v-193.74c0-35.636-28.877-64.615-64.615-64.615H157.286c-35.635 0-64.614 28.877-64.614 64.614v645.94c0 35.635 28.877 64.614 64.614 64.614h387.482c0 35.635 28.877 64.614 64.614 64.614h258.356c35.635 0 64.614-28.876 64.614-64.614V414.618c0-35.738-28.877-64.615-64.614-64.615zM367.206 834.458c-8.908 0-16.179-7.27-16.179-16.18 0-8.908 7.27-16.179 16.18-16.179 8.908 0 16.179 7.27 16.179 16.18-0.103 8.908-7.27 16.179-16.18 16.179z m209.92-419.84v355.225h-419.84c-17.817 0-32.256-14.438-32.256-32.256V156.262c0-17.817 14.439-32.256 32.256-32.256h452.096c17.818 0 32.256 14.439 32.256 32.256v193.741c-35.635 0-64.512 28.877-64.512 64.615z m322.97 451.89c0 17.818-14.438 32.666-32.256 32.666l-226.1-0.102c-17.817 0-32.255-17.818-32.255-35.635v-448.82c0-17.817 14.438-32.255 32.256-32.255H867.84c17.818 0 32.256 14.438 32.256 32.256v451.89z m0 0" p-id="11192"></path></svg>` ,
// `<svg t="1699594039081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1582" width="200" height="200"><path d="M824.889 630.993l-122.027-50.347a28.444 28.444 0 1 0-21.143 53.57l60.112 24.368-60.112 27.59a28.444 28.444 0 0 0-14.602 37.358 28.919 28.919 0 0 0 25.98 16.024 15.455 15.455 0 0 0 11.377-3.224l120.415-54.993a28.919 28.919 0 0 0 16.213-25.979 25.695 25.695 0 0 0-16.213-24.367zM548.599 517.31a28.444 28.444 0 0 0-35.746 17.825l-61.63 188.397a28.444 28.444 0 0 0 17.826 35.745 17.54 17.54 0 0 0 8.154 1.612 31.668 31.668 0 0 0 27.591-19.532l61.725-188.302a28.444 28.444 0 0 0-17.92-35.745z m-189.915 80.023a30.151 30.151 0 0 0-37.357-16.213l-122.216 49.873a30.436 30.436 0 0 0-17.825 25.979 28.444 28.444 0 0 0 16.687 25.695l120.13 55.182a30.056 30.056 0 0 0 11.378 3.224 28.919 28.919 0 0 0 25.98-16.214 28.444 28.444 0 0 0-14.602-37.357l-60.112-27.59 60.112-24.368c16.214-7.775 24.368-24.083 17.825-38.21z" p-id="1583"></path><path d="M853.333 170.667a56.889 56.889 0 0 1 56.89 56.889v568.888a56.889 56.889 0 0 1-56.89 56.89H170.667a56.889 56.889 0 0 1-56.89-56.89V227.556a56.889 56.889 0 0 1 56.89-56.89h682.666m0-56.888H170.667A113.778 113.778 0 0 0 56.889 227.556v568.888a113.778 113.778 0 0 0 113.778 113.778h682.666a113.778 113.778 0 0 0 113.778-113.778V227.556a113.778 113.778 0 0 0-113.778-113.778z" p-id="1584"></path><path d="M967.111 365.321H56.89v56.89H967.11v-56.89zM182.329 273.54a42.667 42.667 0 1 0 85.333 0 42.667 42.667 0 1 0-85.333 0zM314.785 273.54a42.667 42.667 0 1 0 85.334 0 42.667 42.667 0 1 0-85.334 0zM447.241 273.54a42.667 42.667 0 1 0 85.334 0 42.667 42.667 0 1 0-85.334 0z" p-id="1585"></path></svg>`,
// `<svg t="1699594251437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8898" width="200" height="200"><path d="M967.082667 284.416L739.584 56.917333 512 284.416 284.416 56.917333 56.917333 284.416 284.416 512 56.917333 739.584v227.498667h227.498667L512 739.584l227.584 227.498667 227.498667-227.498667L739.584 512l227.498667-227.584zM290.133333 438.016L386.816 341.333333l-39.765333-39.850666-96.768 96.768-34.133334-34.133334 102.4-102.4L273.066667 221.866667 176.384 324.266667 136.533333 284.416 284.416 136.533333l187.733333 187.733334L324.266667 472.149333l-34.133334-34.133333z m-176.384 472.234667V796.416l113.834667 113.834667H113.749333z m170.666667-22.784L136.533333 739.584 739.584 136.533333 887.466667 284.416 284.416 887.466667zM887.466667 739.584L739.584 887.466667 699.733333 847.616l102.4-102.4-39.850666-39.765333-102.4 102.4-34.133334-34.133334 102.4-102.4L682.666667 631.466667 580.266667 733.866667l-34.133334-34.133334 147.882667-147.882666 193.450667 187.733333z" fill="#4A4A4A" p-id="8899"></path></svg>`
// ]}

// 计算机视觉
// 后端
// 移动端
// 前端
// UI
